<template>
    <div class="recommend-wrap">
        <div class="recommend border-default">
            <h2 class="recommend-title">本站搜索</h2>
            <div class="recommend-content">
                <el-input placeholder="请输入内容" size="medium" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>

        <el-tabs :stretch="true" value="newArticle" class="mt20" @tab-click="tabClick" type="border-card">
            <el-tab-pane name="newArticle">
                <span slot="label"><i class="iconfont icon-article1"></i></span>
                <div class="tab-content">
                    <div class="tab-title fs18">最新文章</div>
                    <ul class="content-list">
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane name="recommendArticle">
                <span slot="label"><i class="iconfont icon-Recommend"></i></span>
                <div class="tab-content">
                    <div class="tab-title fs18">站长推荐</div>
                    <ul class="content-list">
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane name="rankArticle">
                <span slot="label"><i class="iconfont icon-rank2"></i></span>
                <div class="tab-content">
                    <div class="tab-title fs18">浏览排行</div>
                    <ul class="content-list">
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane name="starArticle">
                <span slot="label"><i class="iconfont icon-iconfont48"></i></span>
                <div class="tab-content">
                    <div class="tab-title fs18">点赞排行</div>
                    <ul class="content-list">
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                        <li class="item clearfix">
                            <div class="fl list-img">
                                <img class="img-responsive" src="http://www.yangqq.com/d/file/news/life/2018-04-27/762f99f369ae786f970477feeb3b9d77.jpg" alt="">
                            </div>
                            <div class="fr list-content">
                                <p class="fs15">某一人似曾相识某一人似曾相识、某一刻似曾经历</p>
                                <span class="time">2018-08-05</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="advertisement bg-white border-default mt20">
            <el-carousel height="200px" arrow="never">
                <el-carousel-item v-for="item in 4" :key="item">
                    <img class="img-responsive" src="https://www.yangqq.com/bluedream/skin/blue/images/7.jpg" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="recommend mt20 border-default">
            <h2 class="recommend-title">关于本站</h2>
            <div class="recommend-content">
                <div class="content-self clearfix">
                    <div class="img-self">
                        <img class="img-responsive" src="https://www.yangqq.com/bluedream/skin/blue/images/tx.png" alt="">
                    </div>
                    <p class="name">文清笑游 | 闫亚松</p>
                    <p class="self-desc"> 一个90后草根站长！15年入行。一直潜心研究web前端技术，一边工作一边积累经验，分享一些前端技术心得以及分享一些工作中或者常见的前端技术问题。 </p>
                    <ul class="contact-way clearfix">
                        <li class="contact-item"></li>
                        <li class="contact-item"></li>
                        <li class="contact-item"></li>
                        <li class="contact-item"></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="recommend mt20 border-default">
            <h2 class="recommend-title">友情链接</h2>
            <div class="recommend-content">

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SideRecommend",
        methods:{
            tabClick(tab){
                console.log(tab.paneName);
            }
        }
    }
</script>

<style scoped lang="scss">
    .recommend-wrap{
        .el-tabs--border-card{
            box-shadow: none;
        }
        .advertisement{
            padding: 5px;
        }
        .recommend{
            background-color: #fff;
            .recommend-title{
                padding: 5px 20px;
                border-bottom: 1px solid #ddd;
                background-color: #f8f8f8;
                font-size: 15px;
                color: #555555;
            }
            .recommend-content{
                background-color: #fff;
                padding: 15px;
                .content-self{
                    font-size: 15px;
                    color: #9a9a9a;
                    .name{
                        color: #000;
                        line-height: 1;
                        margin-bottom: 5px;
                    }
                    .img-self{
                        width: 100px;
                        height: 100px;
                        float: left;
                        margin-right: 15px;
                    }
                    .contact-way{
                        margin-top: 10px;
                        padding-top: 10px;
                        border-top: #f5f5f5 1px solid;
                        .contact-item{
                            float: left;
                            width: 25%;
                            height: 40px;
                            &:hover{
                                cursor: pointer;
                            }
                            &:nth-child(1){
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_05.png") no-repeat center center;
                                background-size: 40px;
                            }
                            &:nth-child(1):hover{
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_05_1.jpg") no-repeat center center;
                                background-size: 40px;
                            }
                            &:nth-child(2){
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_06.png") no-repeat center center;
                                background-size: 40px;
                            }
                            &:nth-child(2):hover{
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_06_1.jpg") no-repeat center center;
                                background-size: 40px;
                            }
                            &:nth-child(3){
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_04.png") no-repeat center center;
                                background-size: 40px;
                            }
                            &:nth-child(3):hover{
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_04_1.jpg") no-repeat center center;
                                background-size: 40px;
                            }
                            &:nth-child(4){
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_07.png") no-repeat center center;
                                background-size: 40px;
                            }
                            &:nth-child(4):hover{
                                background: url("//www.yangqq.com/bluedream/skin/blue/images/ico_07_1.jpg") no-repeat center center;
                                background-size: 40px;
                            }
                        }
                    }
                }

            }
        }
    }
    .tab-content{
        .content-list{
            padding-top: 15px;
            .item{
                cursor: pointer;
                padding-bottom: 5px;
                padding-top: 5px;
                &:first-child{
                    padding-top: 0;
                }
                &:last-child{
                    padding-bottom: 0;
                }
                &:hover{
                    .list-img{
                        img{
                            transform: scale(1.3);
                        }
                    }

                }
                .list-img{
                    width: 33%;
                    height: 75px;
                    overflow: hidden;
                    img{
                        transform: scale(1.5);
                    }
                }
                .list-content{
                    width: 63%;
                    line-height: 1.5;
                    .time{
                        display: inline-block;
                        margin-top: 10px;
                        color: #9A9A9A;
                    }
                }
            }

        }
    }
</style>